<!DOCTYPE html>
<html class="pixel-ratio-2 retina android android-6 android-6-0">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta name="format-detection" content="telephone=no" />
    <title>首页</title>
    <link rel="stylesheet" href="assets/css/style.css">
	<link rel="stylesheet" href="assets/css/mui.min.css">
	<link rel="stylesheet" href="assets/font/iconfont.css">
	<script src="assets/js/vue.min.js"></script>
	<script src="assets/js/mui.min.js"></script>
	<script src="assets/js/common.js"></script>
	<script src="UpGw/utils.js"></script>
	<script src="assets/js/Bluetooth.js"></script>
	<script src="assets/js/dataBase.js"></script>
</head>
	<body>
		<div id="H5_MUI">
			<!-- 标题栏 -->
			<div class="navigation-bar">
				<div class="navigation-bar-title" >终端管理</div>
				<div class="navigation-left">
					<div class="navigation-left-title"  v-on:click="CommonUtil.clicked('index.html','首页')"><li class="iconfont fs15">&#xe644;</li></div>
				</div>
				<div class="navigation-right">
					<div class="navigation-right-title" v-on:click="CommonUtil.clicked('collectEdit.html','终端编辑')">
						<i class="iconfont fs15">&#xe648;</i>
					</div>
				</div>
			</div>
			<!--  -->
			<div class="search-input-view" >
				<div class="search-input-icon">
					<i class="iconfont">&#xe608;</i>
				</div>
				<div class="search-input-input">
					<input type="input" class="input-clear" v-model="keyStr" v-on:input="searchKey()"  placeholder="搜索">
				</div>
			<!-- 	<div class="search-input-btn"  >搜索</div> -->
			</div>
			<!-- 内容 -->
			<div class="mui-content" style="margin-top: -10px;margin-top: 90px;">
				<ul class="mui-table-view mui-table-view-chevron">
					<li class="mui-table-view-cell mui-media"  v-for="(value,key) in collectList" :key = "key"  v-on:click="collectEdit(value.CollectAddr)" >
						<div class="mui-navigate-right">
							<div  class="mui-media-object mui-pull-left" ><i class="iconfont icon colorA fs16">&#xe649;</i></div>
							<div class="mui-media-body fs14">
								{{value.CollectAddr}}
								<p class="mui-ellipsis">{{value.CollectName}}</p>
							</div>
						</div>
					</li>
				</ul>
			</div>
			<!--  -->
		</div>
	</body>
</html>
<script>
	// 初始化
	var vm = new Vue({
		el: '#H5_MUI',
		data: {
			collectAddr:'000000000000',
			collectList:[],
			keyStr:'',
		},
		created: function () {
			this.plusReady();
		},
		methods: {
			plusReady:function(){
				var that = this;
				document.addEventListener('plusready', function(){
					that.collectAddr = CommonUtil.getStorage('selCollectAddr');
					//创建表
					DB.createTable('Collect','("CollectName" CHAR(110),"CollectAddr" CHAR(100))',function(data){});
					//搜索所有的终端数据
					let sqlStr = "select * from Collect";
					DB.selectSQL(sqlStr,function(data){
						that.collectList = data;
						console.log(JSON.stringify(that.collectList));
					})
				},false);
			},
			collectEdit:function(coollectAddr){
				window.location.href = 'collectEdit.html?'+coollectAddr;
			},
			searchKey:function(){
				console.log(this.keyStr);
				var that = this;
				let sqlStr = "select * from Collect where CollectAddr like '%"+this.keyStr+"%'";
				DB.selectSQL(sqlStr,function(data){
					console.log(JSON.stringify(data));
					that.collectList = data;
					
				})
			}
		}
	})
	 
</script>
